<template>
    <div>
        <Drawer title="工序配置" :before-close="handleClose" :closable="false" v-model="drawerVisible" width="80%"
            class="drawerStyle">

            <div class="tableContent">
                <Button type="primary" @click="handleAddRow">新增</Button>

                <Table :columns="columns" ref="selection" border :data="processList">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="handleEditRow(row)"><i
                                class="iconfont zy-common-bianji"></i>编辑</span>
                        <span class="operationBtn" @click="handleDeleteRow(row)"><i
                                class="iconfont zy-common-shanchu"></i>删除</span>
                    </template>
                </Table>
                <div class="pageWrap mt16">
                    <pageLeftTitle :total="processTotal" />
                    <Page :total="processTotal" :page-size="queryPage.pageSize" :current="queryPage.current"
                        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer />
                </div>
            </div>

        </Drawer>
        <commonModal ref="commonModal"></commonModal>
        <RouterModal :visible="modalVisible" :form="form" :title="title" :handleAddSubmit="handleAddSubmit"
            :closeModal="closeModal" :materialData="materialData" />
    </div>
</template>

<script>
import { Button, Popconfirm } from 'element-ui';
import { editProcedureApi, addProcedureApi, deleteProcedureApi } from '@/api/dataBasic/processRoute';
import RouterModal from './components/routerModal';
import commonModal from '@/components/modalTypes/commonModal.vue';
import { BomApi, editApi, addApi, deleteApi, productApi, } from '@/api/dataBasic/materialBom'

export default {
    name: "DrawerProcess",
    components: {
        commonModal,


        Button,
        RouterModal,
        Popconfirm
    },
    props: {
        drawerVisible: Boolean,
        drawerClose: Function,
        currentItem: Object,
        processList: Array,
        processTotal: Number,
        productProcess: Function,
        materialData: Array,
    },
    data() {
        return {
            queryPage: { current: 1, pageSize: 10 },
            modalVisible: false,
            form: {},
            title: '',
            modalVisibleProcess: false,
            columns: [

                {
                    title: '物料名称',
                    key: 'materialId',
                    align: 'center',
                    render: (h, params) => {
                        const name = this.materialData.find(i => i.id === params.row.materialId)
                        return h('div', name.materialName);
                    }

                }, {
                    title: '数量',
                    key: 'count',
                    align: 'center',

                },
                {
                    title: "操作",
                    slot: "action",
                    fixed: "right",
                    width: 180,
                    align: "center"
                }]
        };
    },
    methods: {
        closeModal() {
            this.modalVisible = false
        },
        changePageNum(val) {
            this.queryPage.current = val;
            this.productProcess({
                materialBomId: this.currentItem.id,
                ...this.queryPage,
            })
        },

        changePageSize(val) {
            this.queryPage.pageSize = val;
            this.productProcess({
                materialBomId: this.currentItem.id,
                ...this.queryPage,
            })
        },
        handleAddSubmit() {
            const url = this.form.id ? editApi : addApi;
            const query = {
                ...this.form,
                materialBomId: this.currentItem.id,
            }
            url(query).then(res => {
                this.$Message.success(res.message);

                this.modalVisible = false;
                this.productProcess({
                    materialBomId: this.currentItem.id,
                    ...this.queryPage,
                })
            })
                .catch(error => {
                    console.error('Error submitting form:', error);

                });
        },
        handleClose(done) {
            this.drawerClose();

        },
        handleAddRow() {
            this.title = '新增';
            this.form = {};
            this.modalVisible = true
        },
        handleEditRow(row, flag) {
            if (flag) {
                this.modalVisibleProcess = true;
                return
            }
            this.modalVisible = true;
            this.form = { ...row };
            this.title = '编辑';
        },
        handleDeleteRow(row) {
            this.$refs.commonModal.showModal({
                title: '删除提醒',
                type: 'warn',
                desc: '是否确认删除？',
                submit: () => {
                    deleteApi({ ids: [row.id] }).then(res => {
                        if (res.code === 200) {
                            this.$Message.success(res.message);
                            this.productProcess({
                                materialBomId: this.currentItem.id,
                                ...this.queryPage,
                            })
                        } else {
                            this.$Message.warning(res.message);
                        }
                    });

                },
            });

        }
    }
}
</script>

<style lang="scss" scoped>
.operationBtn {
    cursor: pointer;
    margin-right: 10px;
}

.tableContent {
    padding: 25px;
}


.drawerZIndex {
    ::v-deep.ivu-drawer-wrap {
        z-index: 12000 !important;
    }

    ::v-deep.ivu-drawer-mask {
        z-index: 11000 !important;
    }


}
</style>